<template>
    <div>
        <div class="title">热销推荐</div>
        <ul>
          <router-link tag = "li"
            class="item border-bottom"
            v-for="item of list"
            :key="item.id"
            :to="'/detail/' + item.id">
                <img class="item-img" :src="item.imgUrl" alt="">
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                    <button class="item-button">查看详情</button>
                </div>
          </router-link>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/mixins.styl'
  .title
    margin-top  10px
    line-height 24px
    background #eeeeee
    text-indent 19px
    // text-indent 属性规定文本块中首行文本的缩进。用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。
    // 注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。
  .item
    overflow hidden
    display flex
    // Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
    //    当然，行内元素也可以使用Flex布局
    // 容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。
    height 94px
    .item-img
      width 85px
      height 85px
      padding 5px
    .item-info
      flex 1
      //   会自动撑开屏幕宽度
      padding 5px
      min-width 0
      //   保证内容不超出外层容器
      .item-title
        line-height 27px
        font-size 16px
        ellipsis()
      .item-desc
        line-height 20px
        color #ccc
        ellipsis()
      .item-button
        line-height 22px
        margin-top 10px
        background #ff9300
        padding 0 10px
        border-radius 10px
        color #fff
</style>
